<template>
	<div id="footer_nav">
        <div class="c-mask" style="background: transparent" v-show="phone.show"
            @click="phone.show = false"></div>
		<div v-for="(nav,i) in navs" :key="i" class="nav" @click=clickNav(nav)>
			<img :src="activeNav == i ? nav.icon_active : nav.icon">
			<p :class="{colored: activeNav == i}">{{nav.name}}</p>
            <div v-if=" nav.name==='充值服务' " v-show="phone.show" id="option_container">
                <a v-for="(o, i) in phone.options" :key="i" class="option" :href="o.path">
                    {{o.name}}
                </a>
            </div>
		</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import buy from '@/assets/img/home/buy.png'
import buy_active from '@/assets/img/home/buy_active.png'
import phone from '@/assets/img/home/phone.png'
import phone_active from '@/assets/img/home/phone_active.png'
import user from '@/assets/img/home/user.png'
import user_active from '@/assets/img/home/user_active.png'
export default{
	name:'FooterNav',
	data(){
		return{
			navs:[{
				name:'商城严选',
				icon:buy,
				icon_active:buy_active,
				path:'/'
			},{
				name:'充值服务',
				icon:phone,
				icon_active:phone_active,
			},{
				name:'个人中心',
				icon:user,
				icon_active:user_active,
				path:'/usercenter'
			}],
            activeNav: 0,
            phone: {
                show: false,
                options: [{
                    name:'预存话费',
                    // path:'/order/phone'
                    path:'http://we.hzchuangxiangzhe.cn/wukong/php/WX_web/phone/3'
                },{
                    name:'话费直充',
                    // path:'/order/phone'
                    path:'http://we.hzchuangxiangzhe.cn/wukong/php/WX_web/phone/4'
                },{
                    name:'共享流量',
                    // path:'/order/phone'
                    path:'http://we.hzchuangxiangzhe.cn/wukong/php/WX_web/phone/1'
                },{
                    name:'流量红包',
                    // path:'/order/phone'
                    path:'http://we.hzchuangxiangzhe.cn/wukong/php/WX_web/phone/2'
                }]
            }
		}
	},
	computed:{
		...mapGetters({
		}),
	},
	created(){
		this.setActiveNav()
	},
	methods:{
		clickNav(nav){
            if(nav.name == '充值服务') this.phone.show = !this.phone.show
			else this.$router.push(nav.path)
		},
		setActiveNav(){
			switch(this.$route.name){
				case 'homepage':
					this.activeNav = 0
					break
				case 'usercenter':
					this.activeNav = 2
                    break
                case 'recharge':
					this.activeNav = 1
					break
			}
		},
		getCartNum(){
			this.$store.dispatch('cart/getCartNum')
		}
	},
	watch:{
		$route(){
            this.setActiveNav()
		}
	}
}
</script>
<style lang='less' scoped>
#footer_nav{
    position: fixed;
    display: flex;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.33rem;
	background: #fbfbfb;
	padding-top: .2rem;
	z-index: 5;
	.nav{
		flex-basis: 0;
        flex-grow: 1;
		text-align: center;
		color: #858585;
		font-size: .32rem;
        position: relative;
        z-index: 101;
		img{
			height: 0.6rem;
			margin-bottom: -.1rem;
		}
	}
}
.red-point{
	right: .85rem;
	top: 0rem;
}
#option_container{
    position: absolute;
    width: 100%;
    bottom: 1.33rem;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
    .option{
        display: block;
        background: #fff;
        border-bottom: 1px solid #bbb;
        height: .9rem;
        line-height: .9rem;
        color: #858585;
    }
}
</style>
